// Vue 应用初始化
const { createApp, ref } = Vue;

// 创建Vue应用
const app = createApp({
    setup() {
        // 状态管理
        const currentView = ref('login'); // 'login' 或 'register'
        const loading = ref(false);
        
        // 检查登录状态的函数
        const checkLoginStatus = async () => {
            try {
                loading.value = true;
                // 向后端发送请求，检查Cookie是否有效
                const res = await axios.get('/api/check-login');
                if (res.data.loggedIn && res.data.redirect) {
                    console.log('检测到登录状态，自动跳转到游戏页面');
                    window.location.href = res.data.redirect;
                } else {
                    console.log('未检测到有效登录状态');
                }
            } catch (error) {
                console.log('检查登录状态时出错:', error.message);
                // 出错时保持在登录页面
            } finally {
                loading.value = false;
            }
        };
        
        // 组件挂载时自动检查登录状态
        checkLoginStatus();
        
        // 登录表单数据
        const loginForm = ref({
            username: '',
            password: ''
        });
        
        // 注册表单数据
        const registerForm = ref({
            username: '',
            password: '',
            confirmPassword: ''
        });
        
        // 错误信息
        const loginError = ref('');
        const registerError = ref('');
        
        // 切换到登录视图
        const goToLogin = () => {
            currentView.value = 'login';
            registerError.value = '';
        };
        
        // 切换到注册视图
        const goToRegister = () => {
            currentView.value = 'register';
            loginError.value = '';
        };
        
        // 登录处理函数
        const handleLogin = async() => {
            // 简单的表单验证
            if (!loginForm.value.username || !loginForm.value.password) {
                loginError.value = '请输入用户名和密码';
                return;
            }
            
            loading.value = true;
            loginError.value = '';
            
            try{
            //使用axios发送post请求
            const res = await axios.post('/api/login', loginForm.value);
            console.log("登录成功,后端已设置cookie");
            
            // 根据后端返回的重定向路径跳转
            if(res.data.redirect) {
                window.location.href = res.data.redirect;
            }
            }catch(error){
                console.error("登录失败:", error.response?.data?.message || error.message);
                
            }finally{
                loading.value = false;
            }
        };
        
        // 注册处理函数
        const handleRegister = () => {
            // 简单的表单验证
            if (!registerForm.value.username || !registerForm.value.password) {
                registerError.value = '请输入用户名和密码';
                return;
            }
            
            if (registerForm.value.password !== registerForm.value.confirmPassword) {
                registerError.value = '两次输入的密码不一致';
                return;
            }
            
            loading.value = true;
            registerError.value = '';
            
            // 模拟API请求
            setTimeout(() => {
                loading.value = false;
                
                // 这里应该是实际的注册API调用
                console.log('注册请求:', registerForm.value);
                
                // 模拟注册成功
                alert('注册成功！请登录');
                goToLogin();
                
                // 清空注册表单
                registerForm.value = {
                    username: '',
                    password: '',
                    confirmPassword: ''
                };
            }, 1000);
        };
        
        return {
            currentView,
            loading,
            loginForm,
            registerForm,
            loginError,
            registerError,
            goToLogin,
            goToRegister,
            handleLogin,
            handleRegister
        };
    },
    template: `
        <div class="container">
            <div class="card">
                <h1 class="title">{{ currentView === 'login' ? '登录' : '注册' }}</h1>
                
                <!-- 登录表单 -->
                <div v-if="currentView === 'login'">
                    <div class="form-group">
                        <label for="loginUsername">用户名</label>
                        <input 
                            id="loginUsername"
                            v-model="loginForm.username"
                            type="text"
                            placeholder="请输入用户名"
                        >
                    </div>
                    <div class="form-group">
                        <label for="loginPassword">密码</label>
                        <input 
                            id="loginPassword"
                            v-model="loginForm.password"
                            type="password"
                            placeholder="请输入密码"
                        >
                    </div>
                    <div v-if="loginError" class="error-message">{{ loginError }}</div>
                    <button 
                        class="btn btn-primary"
                        @click="handleLogin"
                        :disabled="loading"
                    >
                        {{ loading ? '登录中...' : '登录' }}
                    </button>
                    <div class="switch-link">
                        还没有账号？<a href="#" @click.prevent="goToRegister">立即注册</a>
                    </div>
                </div>
                
                <!-- 注册表单 -->
                <div v-else>
                    <div class="form-group">
                        <label for="registerUsername">用户名</label>
                        <input 
                            id="registerUsername"
                            v-model="registerForm.username"
                            type="text"
                            placeholder="请输入用户名"
                        >
                    </div>
                    <div class="form-group">
                        <label for="registerPassword">密码</label>
                        <input 
                            id="registerPassword"
                            v-model="registerForm.password"
                            type="password"
                            placeholder="请输入密码"
                        >
                    </div>
                    <div class="form-group">
                        <label for="confirmPassword">确认密码</label>
                        <input 
                            id="confirmPassword"
                            v-model="registerForm.confirmPassword"
                            type="password"
                            placeholder="请再次输入密码"
                        >
                    </div>
                    <div v-if="registerError" class="error-message">{{ registerError }}</div>
                    <button 
                        class="btn btn-primary"
                        @click="handleRegister"
                        :disabled="loading"
                    >
                        {{ loading ? '注册中...' : '注册' }}
                    </button>
                    <div class="switch-link">
                        已有账号？<a href="#" @click.prevent="goToLogin">返回登录</a>
                    </div>
                </div>
            </div>
        </div>
    `
});

// 挂载Vue应用
app.mount('body');